<template>
    <div class="manage-delists">
        <div class="cont clearfix">
            <p>订单详情</p>
            <div class="content clearfix">
                <div class="zhuangt clearfix" >
                    <h1>订单状态：{{type}}</h1>
                    <div v-if="type==!'待支付'">
                        <p>物流：顺丰速递  运单号：674139587579</p>
                        <p>2018-08-31 15：15：50   <span style="color: #FE5371">已签收,感谢使用顺丰,期待再次为您服务，如有疑问请联系快递员</span></p>
                        <span @click="fun()">查看物流</span>
                    </div>
                </div>
                <div class="xinxi  clearfix">
                    <h1>订单信息</h1>
                    <span>收货信息：</span><p>师欢畅   86-17372916644   江苏省 徐州市 鼓楼区 丰财街道 鼓楼区下淀桥西铁路38宿舍20栋303    220005</p>
                    <span>买家留言：</span><p>师欢畅   </p>
                    <span>订单编号：</span><p>
                    {{list.order_number}}
                    <Dropdown>
                        <a href="javascript:void(0)">
                            下拉菜单
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                            <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                            <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                            <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </p>
                    <span>商家：</span><p>
                    {{list.project.hospital}}
                </p>
                </div>
            </div>
            <div class="shangpD clearfix">
                <div class="title">
                    <ul>
                        <li>商品</li>
                        <li>单价</li>
                        <li>预约价</li>
                        <li>数量</li>
                        <li>状态</li>
                    </ul>
                </div>
                <div class="order-detail clearfix">
                    <div class="info clearfix">
                        <img src="../../../assets/meirong1.jpg" alt="img">
                        <div class="desc">
                            <p class="title">
                                {{list.project.name}}
                            </p>
                            <p class="sub-title">
                                {{list.project.hospital}}
                            </p>
                        </div>
                    </div>
                    <div class="price">
                        ￥{{list.project.nowprice}}
                    </div>
                    <div class="price">
                        ￥{{list.project.yprice}}
                    </div>
                    <div class="pay" style="padding-left: 2%">
                        1
                    </div>
                    <div class="option" style="padding-left: 5%">
                        {{type}}
                    </div>
                </div>
            </div>
            <span>商品总价：</span><p>¥
            {{list.project.nowprice}}
        </p>
            <span>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：</span><p>¥0.00</p>
            <span>优&nbsp;&nbsp;惠&nbsp;&nbsp;卷：</span><p>¥0.00</p>
            <span>实付金额：</span><p>¥399.00</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ManageDelists",
        data () {
            return {
                id:'',
                list:[],
                type:''
            }
        },
        created () {
            this.init()
        },
        methods :{
            fun () {
                this.$router.push({path:'/my/myindex/logistics'})
            },
            init () {
                this.id = this.$route.query.id
                this.type = this.$route.query.type
                let _this = this
                _this.$post('/api/shop/getProjectOrderInfo',
                    {
                        order_id:_this.id
                    },function (res) {
                        _this.list =res.data
                        console.log(res.data)
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style";
    .manage-delists{
        .cont{
            border: solid 1px #e0e0e0;
            padding: 20px;
            >:first-child{
                width: 100%;
                color: @theme-color-dark;
                font-size: 18px;
                border-bottom: 1px solid @theme-color-dark;
                margin-bottom: 20px;
            }
            >span{
                display: block;
                float: left;
                width: 100px;
                text-align: center;
                color: #666666;
                font-size: 14px;
            }
            >p{
                width: 470px;
                float: left;
                color: #333333;
                font-size: 14px;
            }
            .content{
                .zhuangt{
                    >div{
                        >span{
                            margin-top: 20px;
                            background-color: @theme-color-dark;
                            color: white;
                            padding: 8px 12px;
                            border-radius: 4px;
                            cursor: pointer;
                        }
                    }

                }
                .xinxi{
                    margin-top: 10px;
                    >span{
                        color: #666666;
                        font-size: 14px;
                        float: left;
                        display: block;
                        width: 13%;
                    }
                    >p{
                        color: #333333;
                        float: left;
                        width: 87%;

                    }
                }
                h1{
                    color: #333333;
                    font-size: 16px;
                    padding-bottom: 20px;
                    padding-top: 20px;
                }
                p{
                    color: #666666;
                    font-size: 14px;
                    padding-bottom: 20px;
                }

            }
            .shangpD{
                >.title{
                    height: 43px;
                    line-height: 43px;
                    background-color:#f5f5f5;
                    border-top: 2px solid @theme-color-dark;
                    ul{
                        li{
                            float: left;
                            width: 16%;
                            text-align: center;
                            color: #666666;
                            font-size: 14px;
                        }
                        >:first-child{
                            width: 35%;
                        }
                    }
                }
                .order-detail {
                    border: 1px solid @border-color;
                    padding: 15px;
                    font-size: 14px;
                    margin-bottom: 20px;
                    >div {
                        float: left;
                        text-align: center;
                        width: 16%;
                    }
                    .info {
                        width:35%;
                        text-align: left;
                        padding-right: 10px;
                        img {
                            width: 80px;
                            height: 80px;
                            display: inline-block;
                            float: left;
                            margin-right: 10px;
                        }
                        .desc {
                            float: left;
                            width: calc(~"100% - 90px");
                            .title {
                                height: 42px;
                                color: #333;
                            }
                            .sub-title, .count {
                                color: #999;
                            }

                        }
                    }
                    .price , .pay ,.option{
                        margin-top: 30px;
                    }

                }
            }
        }
    }
</style>